<template>
	<view>
		<view class="container">
			<view class="nav">
				<image @click="goBack()" src="/static/tell_left.png" mode=""></image>
				<view class="title">开始托管</view>
			</view>
			<view class="box">
				<view class="header">
					<image class="head_bg" src="/static/tg_start_bg.png" mode=""></image>
					<view class="head_box">
						<view class="box_text">提交信息</view>
						<image src="/static/right.png" mode=""></image>
						<view class="box_text">平台审核</view>
						<image src="/static/right.png" mode=""></image>
						<view class="box_text">设备邮寄</view>
						<image src="/static/right.png" mode=""></image>
						<view class="box_text">评估上架</view>
					</view>
				</view>
				<view class="red_title">
					<image src="/static/tg_red.png" mode=""></image>
					<text>请填写您的托管设备，审核通过后再邮/送</text>
				</view>
				<view class="boxs">
					<view class="boxs_head">
						<text class="head_l">托管仓库</text>
						<view class="head_r">
							<text>{{store_info.title}}</text>
							<image src="/static/tg_down.png" mode=""></image>
						</view>
					</view>
					<view class="boxs_text">
						仓库地址：{{store_info.address}}
					</view>
				</view>
				<view class="boxs">
					<view class="boxs_item">
						<view class="item_l">设备型号：</view>
						<view class="item_r">
							<input type="text" v-model="xinghao" placeholder="例如：索尼280相机" placeholder-class="input_class"/>
						</view>
					</view>
					<view class="boxs_item">
						<view class="item_l">配件描述：</view>
						<view class="item_r">
							<input type="text" v-model="device_desc" placeholder="例如：电池*2 充电器*1 充电线*2" placeholder-class="input_class"/>
						</view>
					</view>
					<view class="boxs_item">
						<view class="item_l">设备SN码：</view>
						<view class="item_r">
							<input type="text" v-model="sn"  placeholder="请输入正确得设备编码" placeholder-class="input_class"/>
						</view>
					</view>
					<view class="boxs_item"   @click="handleTap('picker',1)">
						<view class="item_l">新旧程度：</view>
			<view class="item_r">
				<input type="text" placeholder="请选择" v-model="old" placeholder-class="input_class"/>
			</view>
					</view>
					<view class="boxs_item"   @click="handleTap('picker',2)">
						<view class="item_l">托管时长：</view>
			
						<view class="item_r">
							<input type="text" placeholder="请选择" v-model="time" placeholder-class="input_class"/>
						</view>
					</view>
					<view class="boxs_item">
						<view class="item_l">备注：</view>
						<view class="item_r">
							<input type="text"  v-model="remark" placeholder="选填" placeholder-class="input_class"/>
						</view>
					</view>
				</view>
				<view class="s_text">产品照片(型号，编码，瑕疵等)，若在保修内请同时上传保修卡(带编码页面及 背面)，采购发票等</view>
			<view class="upload_box">
					<!-- <image src="/static/tg_upload.png" mode=""></image> -->
					  <uni-file-picker v-model="imageList" :limit="12" file-mediatype="image" @select="uploadImage" />
				</view>
				
				<view class="zy_text">
					<view class="zy_title">托管注意事项：</view>
					<view class="zy_t">1、机身和镜头请分开单独提交申请，不能拆分的套机除外；</view>
					<view class="zy_t">2、托管器材要求功能正常，成色良好。镜片、CMOS等无划痕、污点、 霉点、灰尘等损伤；</view>
					<view class="zy_t">3、建议可贴膜保护，镜头配备价值100以下的UV镜； </view>
					<view class="zy_t">4、请根据审核后的邮寄要求寄送设备，多余配件平台退回(顺丰到付)， 平台不予保管。</view>
				</view>
				 <checkbox-group @change="handleCheckChange">
				<view class="box_t">
				 <checkbox value="agree" :checked="isChecked" />	我同意 <text>《托管协议》</text>
				</view>
				</checkbox-group>
			</view>
		
			<view class="fixed_box" @click="submit">
				<view class="box_d">
					<view class="d_btn">去托管</view>
				</view>
			</view>
		</view>
		<lb-picker ref="picker"
		  v-model="value"
		  mode="multiSelector"
		  :list="list"
		  :level="1"
		  @change="handleChange"
		  @confirm="handleConfirm"
		  @cancel="handleCancel">
		</lb-picker>	

	</view>
</template>

<script>
	import config from "@/config";
	export default {
		data() {
			return {
				time:'',
				old:'',
				index:'',
				value:[],
				id:'',
				list:[],
				good_title:[],
				 isChecked: false,
				imageList:[],
				store_info:{},
				store_list:[],
				degree_arr:[],
				uploadResults: [],
				time_arr:[],
				xinghao:'',
				device_desc:'',
				sn:'',
				degree:'',
				tg_time:'',
				remark:'',
				photos:'',
			}
		},
		onShow(){
		this.gettuoguanApplys()
		},
		onLoad(e) {
			this.id = e.id
		},
		methods: {
			  handleCheckChange(e) {
			    this.isChecked = e.detail.value.length > 0;
			  },
			uploadImage(e) {
					  let uploadResults = []; // 用于存储所有上传结果的数组
			    const tempFilePath = e.tempFilePaths[0];
			    // uni.uploadFile({
			    //   url: 'ucenter/upload_imgae	',
			    //   filePath: tempFilePath,
			    //   name: 'file',
			    //   success: (res) => {
			    //     const result = JSON.parse(res.data);
			    //     if (result.code === 200) {
			    //       this.imageList = [{ url: result.data.url }];
			    //     }
			    //   }
			    // });
					  let users = this.$storage.getJson("users");
					  
					  uni.uploadFile({
					      url: config.uni_app_web_api_url + '' + '/ucenter/upload_imgae',
					      filePath: tempFilePath,
					      name: 'file',
					      header: { "Auth-Token" : users.token },
					      success: (uploadFileRes) => {
							   console.log( uploadFileRes,'uploadFileRes')
					  		let res = JSON.parse(uploadFileRes.data).data;
									 this.uploadResults.push(res);
									  console.log(  this.uploadResults,'resresres')
									 this.photos =this.uploadResults.join(',')
									 console.log( this.photos,'resresres')
					      }
					  });
					  
					  
					  
			  },
			submit(){
				 if (!this.isChecked) {
				      uni.showToast({
				        title: "请勾选托管协议",
				        icon: "none"
				      });
				      return;
				    }
			this.$http.getTuoguanApplySubmit({
						good_id:this.id,
						store_id:this.store_info.id,
						xinghao:this.xinghao,
						device_desc:this.device_desc,
						sn:this.sn,
						degree:this.old,
						tg_time:this.time,
						remark:this.remark,
						photos:this.photos

				}).then((result) => {
					console.log(result,'resultresult')
					if(result.status == 0){
						this.$utils.msg(result.info);
					}else{
						this.$utils.msg('提交成功');
						setTimeout(()=>{
													  uni.navigateBack(-1);
						},1000)
					}
				}).catch(err => {
				
				});
			},
			handleTap (picker,index) {
				console.log(index,'index')
				this.index = index
				if(index == '1'){
					
						this.list = this.degree_arr 
				}else{
					this.list = this.time_arr 
				}
				
			console.log(picker,'picker')
				this.$refs.picker.show()
			},
			gettuoguanApplys(){
				this.$http.gettuoguanApply({
			id:this.id 
				}).then((result) => {
						// this.good_title = result.data.good_title;
						this.store_info = result.data.store_info;
						// this.store_list = result.data.store_list;
						this.degree_arr = result.data.degree_arr;
						this.time_arr = result.data.time_arr;
						console.log(result.data, 'this.brand_lis')
				}).catch(err => {
				
				});
			},
			handleChange (item) {
				//console.log('change::', item)
			},
			handleConfirm (data) {
				console.log(data,'s')
					if(this.index == 1){
						this.old = data.item[0]
					}else{
						this.time = data.item[0]
					}
		
			},
			handleCancel (item) {
				//console.log('cancel::', item)
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #F7FEFF;
	}
	.container {
		.nav{
			position: fixed;
			top: 0;
			left: 0;
			width: calc(100% - 78rpx);
			padding: 47rpx 39rpx;
			display: flex;
			align-items: center;
			z-index: 99;
			background: linear-gradient( 134deg, rgba(209,240,241,0.9846) 0%, #78C0F9 59%, #BBE0FC 100%);
			image{
				width: 42rpx;
				height: 47rpx;
			}
			.title{
				margin-left: -42rpx;
				flex: 1;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
		.box{
			margin-top: 150rpx;
			padding: 25rpx 32rpx  350rpx 32rpx;
			
			.header{
				height: 98rpx;
				position: relative;
				.head_bg{
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
				}
				.head_box{
					position: absolute;
					left: 0;
					top: 0;
					width: calc(100% - 64rpx);
					height: 100%;
					z-index: 2;
					padding: 0 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					image{
						width: 24rpx;
						height: 24rpx;
						margin: 0 10rpx;
					}
					.box_text{
						font-weight: 400;
						font-size: 28rpx;
						color: #3B76FF;
					}
				}
			}
			
			.red_title{
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				image{
					width: 24rpx;
					height: 24rpx;
				}
				text{
					padding-left: 15rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FF5B5B;
				}
			}
			.boxs{
				margin-top: 24rpx;
				padding: 24rpx 30rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141,191,252,0.5);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				.boxs_head{
					display: flex;
					align-items: center;
					justify-content: space-between;
					text{
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}
					.head_r{
						image{
							width: 26rpx;
							height: 16rpx;
						}
						text{
							padding-right: 18rpx;
						}
					}
				}
				.boxs_text{
					margin-top: 24rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
				.boxs_item:last-child{
					border-bottom: none !important;
				}
				.boxs_item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 26rpx 0;
					border-bottom: 1px solid #D8D8D8;
					.item_l{
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}
					.item_r{
						display: flex;
						align-items: center;
						input,.input_class{
							width: 400rpx;
							outline: none;
							border: none;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							text-align: right;
						}
						text{
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							padding-right: 24rpx;
						}
						image{
							width: 26rpx;
							height: 16rpx;
						}
					}
				}
			}
			
			.s_text{
				margin-top: 36rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #666666;
			}
			.upload_box{
				margin-top: 15rpx;
				image{
					width: 140rpx;
					height: 140rpx;
				}
			}
			.zy_text{
				margin-top: 100rpx;
				.zy_title{
					font-weight: 400;
					font-size: 36rpx;
					color: #333333;
				}
				.zy_t{
					margin-top: 10rpx;
					line-height: 30rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
				}
			}
			.box_t{
				margin-top:10%;
				text-align: center;
				font-weight: 400;
				font-size: 22rpx;
				color: #3D3D3D;
				text{
					color: #3B76FF;
				}
			}
		}
	
		.fixed_box{
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
			z-index:999;
			.box_d{
				padding: 24rpx 0 76rpx 0;
				background: #FFFFFF;
				box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(141,191,252,0.5);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				.d_btn{
					margin: 0 auto 0 auto;
					width: 400rpx;
					height: 80rpx;
					background: linear-gradient( 116deg, #F2EBFF 0%, #D1F0F1 100%);
					box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141,191,252,0.5);
					border-radius: 120rpx 120rpx 120rpx 120rpx;
					border: 1rpx solid #3B76FF;
					font-weight: 400;
					font-size: 36rpx;
					color: #3B76FF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		
		
		
		
		
		
		
		
		
	}
</style>